<template>
  <div>
    <div :id="lineChart" style="width:100%;height: 100%;margin:0 auto;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import actionurl from "../../assets/js/actionurl";

export default {
  name: "lineChart",
  props: {
    chartObj: Object,
    lineChart: String
  },
  data() {
    return {
      newsChartObj: {},
      option: {
        // title: {
        //   text: "测试",
        //   textStyl: {
        //     fontWeight: "normal"
        //   }
        // },
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left",
            color: "#5cc1ff",
            // color: '#fff',
            fontSize: "16"
          },
          backgroundColor: "rgba(15, 52, 135, 0.5)",
          borderWidth: "1",
          borderColor: "#5cc1ff",
          extraCssText: "box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);",
          formatter: function(params) {
            return (
              "<span>" +
              params[0].name +
              "</span>" +
              "<br />" +
              "<span>苹果批发价格涨跌幅: </span>" +
              "<span>" +
              params[0].value +
              "%</span>"
            );
          }
        },
        label: {
          normal: {
            textStyle: {
              color: "#ff3b00"
            }
          },
          emphasis: {
            textStyle: {
              color: "#ff3b00"
            }
          }
        },
        grid: {
          left: "1%",
          right: "7%",
          bottom: "1%",
          top: "30",
          containLabel: true
        },

        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line"
          }
        ]
      }
    };
  },
  watch: {
    chartObj: {
      handler(newValue, oldValue) {
        console.log(newValue);
        this.newsChartObj = newValue;
        this.init();
      }
      //   deep: true
    }
  },
  methods: {
    init() {
      var _this = this;
      const lineChart = echarts.init(document.getElementById(_this.lineChart));

      lineChart.setOption(_this.option);
      lineChart.setOption({
        xAxis: {
          data: _this.newsChartObj.ydata
        },
        series: [
          {
            data: _this.newsChartObj.Sdata
          }
        ]
      });
      window.addEventListener("resize", function() {
        lineChart.resize();
      });
    }
  },
  mounted() {
    this.init();
  },
  created() {}
};
</script>
